import React, { Component } from 'react'
import * as d3 from 'd3'

export default class Maths extends Component {

    componentDidMount() {
        var width = 960,
            height = 500,
            padding = 6;
        d3.select('.ms').select("svg").remove()
        let svg = d3.select('.ms').append("svg").attr("width", width + 50).attr("height", height + 50)

        // var values = d3.range(1000).map(d3.random.bates(10)); 旧的写法
        var values = d3.range(1000).map(d3.randomBates(10));
        // var x = d3.scale.linear()
        var x = d3.scaleLinear()
            .domain([0, 1])
            .range([0, 3 * width / 4]);

        var data = d3.histogram()
            .domain(x.domain())
            .thresholds(x.ticks(20))(values);

        var xAxis = d3.axisBottom()
            .scale(x)
            .ticks(7);           //指定刻度的数量


        var y = d3.scaleLinear()
            .domain([0, d3.max(data, function (d) { return d.y; })])
            .range([height, 0]);

        svg.append("g").attr("transform", "translate(" + padding * 2 + "," + padding + ")");

        var bar = svg.selectAll(".bar")
            .data(data)
            .enter().append("g")
            .attr("class", "bar")
            .attr("transform", function (d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });

        bar.append("rect")
            .attr("x", padding)
            .attr("width", x(data[0].dx) - 1)
            .attr("height", function (d) { return height - y(d.y); });
        bar.append("text")
            .attr("dy", ".35em")
            .attr("y", 6)
            .attr("x", x(data[0].dx) / 2)
            .attr("text-anchor", "middle")
            .text(function (d) { return d.y; })
            .attr("fill", "#fff");
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(" + padding + "," + height + ")")
            .call(xAxis);
    }

    render() {
        return (
            <div className="ms"></div>
        )
    }
}
